<template>
  <div>
    <div class="demo-inner-divider">背景色提示
      <div class="row">
        <e-button @click="showAllMessageWithBackground">提醒</e-button>
      </div>
    </div>
    <div class="demo-inner-divider">无背景色提示
      <div class="row">
        <e-button @click="info">提示</e-button>
        <e-button @click="warning">警告</e-button>
        <e-button @click="success">成功</e-button>
        <e-button @click="error">错误</e-button>
      </div>
    </div>
    <div class="demo-inner-divider">可关闭提示
      <div class="row">
        <e-button @click="closable">显示可关闭弹框</e-button>
      </div>
    </div>
    <read-me  class="markdown-body"></read-me>
  </div>
</template>
<script>

import ReadMe from '../../docs/message.md';
export default {
  components: { ReadMe },
  data () {
    return {
      a: false,
      list: [{
        a: 1
      }]
    }
  },
  methods: {
    inn () {
    },
    out () {
    },
    handleAdd () {
      this.list.push({
        a: 1
      })
    },
    handleRemove () {
      this.list.splice(0, 1);
    },
    showAllMessageWithBackground () {
      this.$Message.info({
        content: '这是一条普通的提示',
        duration: 3,
        background: true
      });
      this.$Message.success({
        content: '这是一条成功提示',
        duration: 3,
        background: true
      });
      this.$Message.warning({
        content: '这是一条警告提示',
        duration: 3,
        background: true
      });
      this.$Message.error({
        content: '这是一条错误提示',
        duration: 3,
        background: true
      });
    },
    info () {
      this.$Message.info('这是一条普通的提示');
    },
    success () {
      this.$Message.success('这是一条成功提示');
    },
    warning () {
      this.$Message.warning('这是一条警告提示');
    },
    error () {
      this.$Message.error('这是一条错误提示');
    },
    loading () {
      const msg = this.$Message.loading({
        content: '加载中...',
        duration: 0
      });
      setTimeout(msg, 3000);
    },
    closable () {
      this.$Message.info({
        content: '当前需要手动关闭的内容',
        duration: 100,
        closable: true
      });
    }
  }
}
</script>
